<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Web Ledger</title>
<link rel="stylesheet" href="cssFile/newlogincss.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$(".homeMenu").click(function() {
			$.get("MenuPage/" + this.id + ".html", function(data) {
				$("#middleDiv").html(data);
			});

		});

	});
	function GetMenuData() {
		$(document).ready(function() {
			$.get("MenuPage/home.html", function(data) {
				$("#middleDiv").html(data);
			});
		});

	}
	function ValidData() {
		var username, password;
		username = document.getElementById("username").value;
		password = document.getElementById("password").value;
		if (username == null || username == "") {
			document.getElementById("error").innerHTML = "Username must not be empty";
			document.getElementsByTagName("LI")[0].removeAttribute("style");
			return false;
		} else if (password == null || password == "") {
			document.getElementById("error").innerHTML = "Password must not be empty";
			document.getElementsByTagName("LI")[0].removeAttribute("style");
			return false;

		} else {
			return true;
		}

	}
</script>

<style type="text/css">
.error {
	color: red;
}
</style>
</head>
<body onload="GetMenuData()">
	<div class="MainDiv">
		<div class="headerMenu">
			<div class="loginHeader" style="height: 50px;">
				<div class="login">
					<form action="login" method="post">
						<label> Username </label> <label><s:textfield
								name="username" id="username" value="admin"
								style="color: black;" size="20" /></label> <label>Password</label> <label><s:password
								name="password" id="password" style="color: black;" size="20" /></label>
						<label><input type="submit" id="loginBtn" value="Log In"
							onclick="return ValidData(); "></label>
						<div class="error">
							<ul>
								<li style="list-style-type: none;"><span id="error"></span></li>
							</ul>

							<s:actionerror />
						</div>

					</form>
				</div>
			</div>

			<div class="loginHeader" style="height: 20px;">
				<div class="headername">WebLedger</div>
			</div>
			<div class="loginHeader" style="height: 30px;">
				<div class="menu">
					<ul>
						<li><a class="homeMenu" id="home" href="#">Home</a></li>
						<li><a class="homeMenu" id="servicesMenuID" href="#">Services</a></li>
						<li><a class="homeMenu" href="#">Portfolio</a></li>
						<li><a class="homeMenu" id="blog" href="#">Blog</a></li>
						<li><a class="homeMenu" id="lcontact" href="#">Contact</a></li>

					</ul>
				</div>
			</div>
		</div>

		<div class="body">

			<div class="middleDiv" id="middleDiv"></div>

		</div>
	</div>
	<div class="footer">Fotter</div>
</body>
</html>